<template>
	<view class="room-list">
		<!-- 卧室 -->
		<uni-title type="h3" title="卧室" align="center"></uni-title>
		<uni-list>
			<uni-list-item v-for="room in roomList" showArrow :title="room.style + room.type" rightText="VR看房" clickable
				@click="viewVR(room)" v-if="room.type=='卧室'" />
		</uni-list>
		<!-- 客厅 -->
		<uni-title type="h3" title="客厅" align="center"></uni-title>
		<uni-list>
			<uni-list-item v-for="room in roomList" showArrow :title="room.style + room.type" rightText="VR看房" clickable
				@click="viewVR(room)" v-if="room.type=='客厅'" />
		</uni-list>
		<!-- 餐厨 -->
		<uni-title type="h3" title="餐厨" align="center"></uni-title>
		<uni-list>
			<uni-list-item v-for="room in roomList" showArrow :title="room.style + room.type" rightText="VR看房" clickable
				@click="viewVR(room)" v-if="room.type=='餐厨'" />
		</uni-list>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				roomList: [{
						style: '中式',
						type: '卧室',
						image: 'ZhongShi-WoShi.jpeg'
					},
					{
						style: '现代',
						type: '卧室',
						image: 'XianDai-WoShi.jpeg'
					},
					{
						style: '新古典',
						type: '卧室',
						image: 'XinGuDian-WoShi.jpeg'
					},
					{
						style: '欧式',
						type: '卧室',
						image: 'OuShi-WoShi.jpeg'
					},
					{
						style: '美式',
						type: '卧室',
						image: 'MeiShi-WoShi.jpeg'
					},
					{
						style: '北欧',
						type: '卧室',
						image: 'BeiOu-WoShi.jpeg'
					},
					{
						style: '中式',
						type: '客厅',
						image: 'ZhongShi-KeTing.jpeg'
					},
					{
						style: '现代',
						type: '客厅',
						image: 'XianDai-KeTing.jpeg'
					},
					{
						style: '法式',
						type: '客厅',
						image: 'FaShi-KeTing.jpeg'
					},
					{
						style: '中式',
						type: '餐厨',
						image: 'ZhongShi-CanChu.jpeg'
					},
					{
						style: '现代',
						type: '餐厨',
						image: 'XianDai-CanChu.jpeg'
					},
					{
						style: '新古典',
						type: '餐厨',
						image: 'XinGuDian-CanChu.jpeg'
					},
					{
						style: '欧式',
						type: '餐厨',
						image: 'OuShi-CanChu.jpeg'
					},
					{
						style: '美式',
						type: '餐厨',
						image: 'MeiShi-CanChu.jpeg'
					},
					{
						style: '法式',
						type: '餐厨',
						image: 'FaShi-CanChu.jpeg'
					},
				]
			}
		},
		methods: {
			viewVR(room) {
				console.log(room, "看房")
				const fullUrl = encodeURIComponent('../RoomTypeList/images/' + room.image)
				const location = encodeURIComponent('../RoomTypeList/images/')
				uni.navigateTo({
					// url: `/pages/homepage/VR/index?imageurl=${fullUrl}`,
					url: `/pages/homepage/VR/index?imageurl=${room.image}&location=${location}`,
				})
			}
		}
	}
</script>

<style lang="scss">
	.room-list {
		padding: 0 10px;
	}

	page {
		background-color: white;
	}
</style>